<template>
	<view>
		<view class="top">

			<view class="top-image">
				<image :src="userDetail.image"></image>
			</view>
			<view v-if="user" class="top-loginAndRegist" @click="getUser">
				<view>
					登录/注册
				</view>
				<view class="top-loginAndRegist-score">
					积分:0
				</view>
			</view>
			<view v-else class="top-loginAndRegist" @click="updateUser">
				<view style="margin: 1vh;">
					个人信息
				</view>
				<view class="top-loginAndRegist-score">
					<!-- 积分:0 -->
					昵称:{{userDetail.name}}
				</view>
			</view>
		</view>
		<view class="nav" v-if="userDetail.type=='会员'">

			<view  class="nav-item" v-for="item in navArr" @click="turn(item)">
				<view class="nav-item-count">
					{{item.count}}
				</view>
				<view class="nav-item-text">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="nav" v-else>
			<view class="nav-item" v-for="item in navArr1">
				<view class="nav-item-count">
					{{item.count}}
				</view>
				<view class="nav-item-text">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="service">
			<view class="service-title">我的服务</view>
			<view class="service-item" v-for="item in serviceArr" @click="turn(item)">
				<view class="service-item-image">
					<image :src="item.image"></image>
				</view>
				<view class="service-item-text">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="bottom">

		</view>
	</view>
</template>

<script>
	import {
		getClassesMouthCount,
		getClassesTotalCount,
		getSelectedCardByUserId,
		getSelectedClassesByUserId,
		getUserById,
		getTheacherCount
	} from '../../api/user'
	import {
		baseUrl
	} from '../../config'
	export default {
		data() {
			return {
				defaultImage: "/static/img/teacher1.png",
				navArr: [{
						count: 0,
						text: "已选卡包",
						pageUrl: "/pages/cardSelected/cardSelected"
					},
					{
						count: 0,
						text: "已选课程",
						pageUrl: "/pages/classesSelected/classesSelected"
					}
				],
				navArr1: [{
						count: 0,
						text: "总课时",
						pageUrl: "/pages/cardSelected/cardSelected"
					},
					{
						count: 0,
						text: "本月课时",
						pageUrl: "/pages/classesSelected/classesSelected"
					}
				],
				serviceArr: [{
						image: "/static/img/orders.png",
						text: "订单",
						pageUrl: "/pages/order/order"
					},
					{
						image: "/static/img/notice1.png",
						text: "通知",
						pageUrl: "/pages/notice/notice"
					}
				],
				user: false,
				userDetail: {}
			}
		},
		methods: {
			getUser() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			updateUser() {
				uni.navigateTo({
					url: "/pages/detail/userDetail"
				})
			},
			turn(item) {
				uni.navigateTo({
					url: item.pageUrl
				})

			},
			init() {
				this.user = uni.getStorageSync("auth") == null
				var userId=uni.getStorageSync('auth')
				if (!this.user) {
					getUserById(userId).then(res => {
						console.log("**************");
						console.log(res.data.data);
						res.data.data.image = baseUrl + "/common/download?name=" + res.data.data.image
						this.userDetail = res.data.data
						if(res.data.data.type=='会员'){
							getSelectedCardByUserId(uni.getStorageSync('auth')).then(res => {
								console.log(res);
								this.navArr[0].count = res.data.data.length
							})
							getSelectedClassesByUserId(uni.getStorageSync('auth')).then(res => {
								this.navArr[1].count = res.data.data.length
							})
						}else{
							getTheacherCount(userId).then(res=>{
								console.log(res);
								this.navArr1[0].count=res.data.data.allCount
								this.navArr1[1].count=res.data.data.mouthCount
							})
							// getClassesTotalCount(userId).then(res=>{
							// 	console.log(res);
							// 	this.navArr1[0].count=res.data.data
							// })
							// getClassesMouthCount(userId).then(res=>{
							// 	console.log(res);
							// 	this.navArr1[1].count=res.data.data
							// })
						}
					})
				}
				
				
			}
		},

		onLoad() {
			this.init()
		},
		onPullDownRefresh() {
			this.init()
		}
	}
</script>

<style>
	.top {

		width: 100%;
		height: 30vh;
		display: flex;
		background-color: #00BDB5;
	}

	.top-image {
		width: 8vh;
		height: 8vh;
		border-radius: 50%;
		flex: 2;
		margin: 16vh 2vh;
	}

	.top-image image {
		width: 12vh;
		height: 12vh;
		border-radius: 50%;
	}

	.top-loginAndRegist {
		flex: 9;

		box-sizing: border-box;
		padding-top: 16vh;
	}


	.top-code image {
		width: 100%;
		height: 100%;
	}

	.top-loginAndRegist {
		color: white;
		line-height: 4vh;
		font-weight: bold;
	}

	.top-loginAndRegist-score {
		font-weight: normal;
		font-size: 2vh;
		background-color: #0AB1A7;
		flex: 0 0 8vh;
		text-align: center;
		height: 2.5vh;
		line-height: 2.5vh;
		border-radius: 1.5vh;
		margin: 1vh;
	}

	.nav {
		background-color: white;
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
		height: 10vh;
		position: relative;
		top: 5vh;
		border-radius: 2vh;
	}

	.student-nav {
		display: flex;
	}

	.nav-item {
		flex: 1;
		font-size: 4vh;
		text-align: center;
		margin-top: 2vh;
		line-height: 3vh;
	}

	.nav-item-count {
		color: #00BDB5;
		font-size: 4vh;
		font-weight: bold;
	}

	.nav-item-text {

		margin-top: 0.5vh;
		font-size: 2.5vh;
	}

	.service {
		width: 90%;
		background-color: white;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		border-radius: 2vh;
		position: relative;
		top: 10vh;
	}

	.service-title {
		width: 100%;
		margin: 2vh;
	}

	.service-item {
		flex: 1;
		width: 100%;
		text-align: center;
		margin-bottom: 2vh;
		font-size: 2.5vh;

	}

	.service-item-image {
		width: 8vh;
		height: 8vh;
		margin: 0 auto;
	}

	.service-item-image image {
		width: 100%;
		height: 100%;
	}
</style>